<template>
	<view class="task-progress-wrap">
		<uv-navbar title="任务进度" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" rightText="" rightIconColor="#313C56" :autoBack='true'
			titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class="task-progress-header">
			<view class="title">
				{{ info.name }}
			</view>
			总金额: {{info.totalAmount}} USDT
			<view class="tip">
				正在努力完成任务中...
			</view>
		</view>
		<view class="scroll-wrap" style="height: calc(100% - 178px);">
			<scroll-view class="scroll" :scroll-y="true">
				<view class="box base-info flex-row flex-between flex-items-center">
					<image class="avatar" :src="info.head" mode=""> </image>
					<view class="info">
						<view class="name flex-row flex-items-center">
							{{info.bossName}}
							<image class="grade" v-if="info.level === 0" src="../../static/user/b0.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
							<image class="grade" v-if="info.level === 1" src="../../static/user/b1.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
							<image class="grade" v-if="info.level === 2" src="../../static/user/b2.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
							<image class="grade" v-if="info.level === 3" src="../../static/user/b3.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
							<image class="grade" v-if="info.level === 4" src="../../static/user/b4.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
							<image class="grade" v-if="info.level === 5" src="../../static/user/b5.png"
								style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
								mode="widthFix"></image>
						</view>
						<view class="button" @click="teamDetails(info.bossType, info.bossId)">查看主页</view>
					</view>
					<image class="message" src="../../static/message.png" mode=""></image>
				</view>

				<view class="deliver-list">
					<view class="box-item" v-for="(item, index) in info.plans" :key="index">
						<view class="title">
							第 {{ index + 1 }} 期 -
							{{ item.amount }} USDT - {{ item.rate }}
						</view>
						<view class="deadline">
							截止时间：{{item.endTime}}
						</view>
						<view class="timeout" v-if="item.delay == 1 && item.status == 0">
							已超时，请与合作对象沟通
						</view>

						<view class="empty flex-row flex-column flex-center flex-items-center" v-if="item.status == 0">
							<image src="../../static/empty.png" mode=""></image>
							<view class="text">
								等待合作对象上传
							</view>
						</view>

						<view v-if="item.status == 0" class="button-wrap flex-row flex-center flex-items-center">
							<view
								:class="`deliver-button flex-row flex-center flex-items-center ${item.status == 0 && 'active'}`" @click="intoTaskDetail(item.projectId, item.planId, item.status)">
								上传任务
							</view>
						</view>

						<view class="deliver-info" v-if="item.status == 1 || item.status == 2">
							<view class="list-header flex-row flex-items-center">
								图片
							</view>
							<view class="img-list">
								<image v-for="(img,index) in item.pics" :src="img" mode=""
									@click="previewImage(item.pics, index)"> </image>
							</view>
							<view class="list-header flex-row flex-items-center">
								附件
							</view>
							<view class="file-box flex-row flex-between flex-items-center"
								v-for="(document, index) in item.documents" :key="index">
								<image class="icon" src="../../static/file-icon.png" mode=""></image>
								<view class="content">
									<view class="name">
										{{ document.name }}
									</view>
								</view>
								<image class="download" src="../../static/download.png" mode=""
									@click="download(document.detailUrl)"></image>
							</view>
							<view class="list-header flex-row flex-items-center">
								上传时间
							</view>
							<view class="time-wrap">
								<view class="time">
									上传时间：{{item.time}}
								</view>
								<view v-if="item.status == 1" class="update flex-row flex-center flex-items-center" @click="intoTaskDetail(item.projectId, item.planId, item.status)">
									修改
								</view>
							</view>
						</view>

					</view>
				</view>

				<view class="stop-button-wrap">
					<view class="stop-button flex-row flex-center flex-items-center">
						终止项目
					</view>
				</view>
			</scroll-view>
		</view>
		<!--		<view class="toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">-->
		<view class="toolbar">
			<view class="flex-row flex-center flex-items-center" style="width:100%;height: 10px; ">
				<view v-if="info.evaluable" class="button flex-row flex-center flex-items-center" @click="">
					完成任务
				</view>
				<view v-if="info.evaluable" class="button flex-row flex-center flex-items-center" @click="">
					评价
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>

</template>

<script>
	import {
		progressDetail
	} from "../../api";

	export default {
		data() {
			return {
				project: 0,
				info: {},
				progressInfo: {
					baseInfo: {
						name: '某某公司',
						grade: 7,
						avatar: 'https://img2.baidu.com/it/u=3353521230,712511194&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1705770000&t=20c15d6ddfbc16d64ebdbfbfa42796bf'
					},
					start: true,
					deliveryInfo: [{
							deadline: '2024-06-12',
							timeout: false,
							start: true,
							disable: false,
							info: {
								imgs: [
									'https://img0.baidu.com/it/u=3021765758,3528658009&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1705770000&t=3c540551c85eefff48b9bda762831321',
									'https://img2.baidu.com/it/u=16610762,29876562&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1705770000&t=15cb0d05a6b6d6675cc2085218389df1',
								],
								file: {
									name: '一期任务交付.word',
									size: 200,
								},
								uploadTime: '2024-01-12',
								update: false,
							},
						},
						{
							deadline: '2024-06-12',
							timeout: true,
							start: true,
							info: null,
							disable: false,
						},
						{
							deadline: '2024-06-12',
							timeout: false,
							start: false,
							info: null,
							disable: false,
						},
					],
					complete: true, // 是否完成 展示底部按钮 
					evaluable: false, // 可评价
				},
			};
		},
		computed: {
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			}
		},
		onLoad(info) {
			this.project = info.id
		},
		mounted() {
			this.show()
		},
		methods: {
			// 发布任务和修改任务
			intoTaskDetail(projectId, planId, status) {
				uni.navigateTo({
					url: `/pages/task-accepting-plan/task-accepting-plan?projectId=${projectId}&planId=${planId}&status=${status}`,
					events: {
						planEditComplete: () => {
							this.getProject()
						}
					}
				})
			},
			previewImage(url, index) {
				console.error(url + '___' + index)
				uni.previewImage({
					urls: url,
					current: index
				})
			},
			download(url) {
				// #ifdef H5
				window.location.href = url
				// #endif
			},
			show() {
				this.getProject()
			},
			getProject() {
				let params = {
					type: 2,
					id: this.project,
				}
				progressDetail(params).then((data) => {
					this.info = data
					console.error(this.info)
				}).catch((e) => {})
			},

			/**
			 * 公司详情跳转
			 */
			teamDetails(type, id) {
				if (type == 3) {
					uni.navigateTo({
						url: '/pages/person-detail/person-detail?userId=' + id + "&sys=0"
					})
				} else {
					uni.navigateTo({
						url: '/pages/company-detail/company-detail?id=' + id
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-progress-wrap {
		background: url(/static/progress-bg.png) top left;
		background-size: 100% 400px;
		background-repeat: no-repeat;
		display: flex;
		height: 100vh;
		width: 100vw;
		flex-direction: column;
		background-color: #F4F7FD;
		overflow: hidden;

		.task-progress-header {
			margin: 12px;

			.title {
				font-size: 18px;
				color: #313C56;
			}

			.tip {
				height: 16px;
				margin-top: 4px;
				font-size: 12px;
				color: #6B7885;
			}
		}

		.scroll-wrap {
			padding: 0 12px;
			box-sizing: border-box;

			.scroll {
				width: 100%;
				border-radius: 12px;
				height: 100%;

				.base-info {
					padding: 12px;
					height: 66px;
					background-color: #fff;
					border-radius: 12px;

					.avatar {
						width: 40px;
						height: 40px;
					}

					.info {
						flex: 1;
						margin: 0 16px;

						.name {
							font-size: 16px;
							color: #313C56;

							.grade {
								margin-left: 4px;
								width: 18px;
								height: 18px;
							}
						}

						.button {
							margin-top: 4px;
							font-size: 12px;
							color: #EB7520;
						}
					}

					.message {
						width: 18px;
						height: 18px;
					}
				}

				.deliver-list {
					.box-item {
						box-sizing: border-box;
						background-color: #fff;
						border-radius: 12px;
						margin-top: 12px;
						height: auto;
						padding: 16px;
						width: 100%;

						.title {
							font-size: 16px;
							color: #313C56;
						}

						.deadline {
							font-size: 12px;
							color: #6B7885;
						}

						.deliver-info {

							.list-header {
								font-size: 14px;
								color: #313C56;
								margin: 12px 0 4px;

								&::before {
									content: '';
									height: 10px;
									width: 2px;
									background: #EB7520;
									border-radius: 2px;
									margin-right: 4px;
								}
							}

							.img-list {
								image {
									width: 80px;
									height: 80px;
									border-radius: 6px;
									margin-right: 12px;
								}
							}

							.file-box {
								height: 72px;
								border: 1px solid #EFF0F4;
								border-radius: 8px;
								padding: 0 16px;

								.icon {
									width: 36px;
									height: 36px;
								}

								.content {
									margin: 0 4px 0 12px;
									flex: 1;

									.name {
										font-size: 14px;
										color: #313C56;
									}

									.size {
										font-size: 14px;
										color: #6B7885;
									}
								}

								.download {
									width: 16px;
									height: 16px;
								}
							}

							.time-wrap {
								position: relative;

								.time {
									font-size: 12px;
									color: #6B7885;
									margin: 4px 0 48px;
								}

								.btn {
									position: absolute;
									right: 0;
									top: 20px;
									width: 128px;
									height: 36px;
									background: #EB7520;
									box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
									border-radius: 80px 80px 80px 80px;
									font-size: 14px;
									color: #FFFFFF;
								}

								.update {
									position: absolute;
									right: 0;
									top: 20px;
									width: 56px;
									height: 36px;
									background: #FFFFFF;
									box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
									border-radius: 80px 80px 80px 80px;
									font-size: 14px;
									color: #344054;
									border: 1px solid rgba(16, 24, 40, 0.05);
								}
							}
						}

						.button-wrap {
							padding: 20px 0 8px;

							.deliver-button {
								width: 128px;
								height: 36px;
								background: #FBDED2;
								box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
								border-radius: 80px 80px 80px 80px;
								font-size: 14px;
								color: #FFFFFF;

								&.active {
									background: #EB7520;
								}
							}
						}

						.timeout {
							font-size: 12px;
							color: #D82D2D;
						}

						.empty {
							image {
								width: 80px;
								height: 80px;
								margin: 12px 0 4px;
							}

							.text {
								font-size: 12px;
								color: #95A4B3;
							}
						}
					}
				}

				.stop-button-wrap {
					padding: 12px 0 16px;

					.stop-button {
						background: #fff;
						margin-top: 12px;
						width: 100%;
						height: 44px;
						border-radius: 80px;
						font-size: 16px;
						color: #313C56;
					}
				}
			}
		}


		.toolbar {
			height: 10px;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24px 24px 0px 0px;
			box-sizing: border-box;
			font-size: 16px;
			color: #fff;

			.button {
				width: 303px;
				height: 44px;
				background: #EB7520;
				box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
				border-radius: 80px 80px 80px 80px;
			}
		}


	}
</style>